<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { useIuserInfoStore } from '@T2/store/users.ts';
import { optionApi as MainApi, optionById as MainById } from '@T2/service/api.ts';
import { DeleteMain } from '@T2/utils/handleFnc.ts';
import { buildTree } from '@T2/utils/utils.ts';
import MainDialog from './components/MainDialog.vue';

const iuserInfoStore = useIuserInfoStore();
const { getHandleRight } = iuserInfoStore;
const RIGHT = getHandleRight(['404', '405', '406']);

const MainRt = reactive({
  data: [],
  total: 0,
});
const Filter = reactive({
  page: 1,
  // pagesize: 30,
  search: '',
  type: '曲线分组',
});
watch(() => ({...Filter}), (nv, ov) => {
  if (nv.page === 1 || nv.page !== ov.page) {
    GetMain();
  } else {
    Filter.page = 1;
  }
});

onMounted(() => {
  GetMain();
});

const GetMain = () => {
  MainApi({
    method: 'get',
    params: {
      ...Filter,
    },
  }).then(res => {
    MainRt.data = res?.results || [];
    MainRt.data = buildTree(res?.results || [], 'parent');
    MainRt.total = res?.count || 0;
  }).catch(err => {
    MainRt.data = [];
  });
}

/* 新增编辑弹窗 */
const MainDlgRt = reactive({
  show: false,
  type: '新增',
  dftData: null,
  row: null,
});
const handleMainDialog = (isAble = false, type, row = null) => {
  if (!isAble) {
    return;
  }
  MainDlgRt.type = type;
  MainDlgRt.show = true;
  MainDlgRt.dftData = type === '新增' ? { type: Filter.type, parent: row?.id || null } : null;
  MainDlgRt.row = row;
}
const closeMainDialog = (refresh = false) => {
  MainDlgRt.show = false;
  if (refresh) {
    GetMain();
  }
}
</script>

<template>
  <div class="view flex">
    <div class="alarm-box flex mainCard">
      <el-tabs v-model="Filter.type" tab-position="left" class="demo-tabs">
        <el-tab-pane label="曲线分组" name="曲线分组"></el-tab-pane>
        <el-tab-pane label="报表分组" name="报表分组"></el-tab-pane>
      </el-tabs>
      <div class="flex-column" style="flex: 1;overflow: hidden;">
        <el-form label-width="120px" class="flex t_form">
          <div class="flex r_btn">
            <el-button type="primary" @click="handleMainDialog(RIGHT['404'], '新增')" :disabled="!RIGHT['404']">
              新增
            </el-button>
          </div>
        </el-form>
        <el-table :data="MainRt.data" row-key="id" default-expand-all scrollbar-always-on >
          <el-table-column label="分组名称" prop="name" fixed="left" min-width="160px" show-overflow-tooltip></el-table-column>
          <el-table-column label="创建时间" prop="create_time" fixed="left" min-width="160px" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" fixed="right" width="260px">
            <template #default="{ row }">
              <el-button link type="primary" @click="handleMainDialog(RIGHT['404'], '新增', row)" :disabled="!RIGHT['404']">
                新增下级
              </el-button>
              <el-button link type="primary" @click="handleMainDialog(RIGHT['405'], '编辑', row)" :disabled="!RIGHT['405']">
                编辑
              </el-button>
              <el-button link type="danger" @click="DeleteMain(RIGHT['406'], MainById, row, '', GetMain)" :disabled="!RIGHT['406']">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination
          layout="->, total, prev, pager, next, sizes"
          background 
          :page-sizes="[10, 20, 30, 50, 100]"
          :pager-count="5"
          v-model:currentPage="Filter.page"
          v-model:page-size="Filter.pagesize"
          :total="MainRt.total"
        /> -->
      </div>
    </div>
  </div>
  
  <MainDialog
    :type="MainDlgRt.type"
    :row="MainDlgRt.row"
    :dftData="MainDlgRt.dftData"
    @closed="closeMainDialog"
    v-if="MainDlgRt.show"
  />
</template>

<style lang="scss" scoped>
@use '@T2/styles/normal.scss';
.view {
  width: 100%;
  height: 100%;
}
.alarm-box {
  flex: 1;
  overflow: hidden;
  position: relative;
}
</style>


<style scoped>
:deep(.filter-input.el-input) {
  margin-bottom: 8px;
}
:deep(.filter-input .el-input__wrapper) {
  box-shadow: none;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  border-radius: 0;
}
:deep(.filter-input .el-input__inner) {
  color: #121E34;
}

:deep(.el-tree) {
  flex: 1;
  overflow: overlay;
  overflow-x: hidden;
  border-radius: 3px;
  padding: 4px 0;
}
:deep(.is-current>.el-tree-node__content) {
  background-color: #F1F4FA !important;
}
:deep(.el-tree .el-icon) {
  margin-right: 4px;
}
:deep(.el-tree .el-tree-node__label) {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
</style>